import React from 'react'
import { HashRouter, Route, Switch } from 'react-router-dom'
import Login from '../pages/login/index.jsx'
import NewCar from '../pages/newCar/index.jsx'
import Rank from '../pages/rank/index.jsx'
import { getMain } from '../utils/main'

// 使用store的方法
import { useLocalReducer } from '../store/useLocalReducer'
import { context } from '../hooks/useLocalContext'

const BasicMap = () => {
  const [state, dispatch] = useLocalReducer()
  const main = getMain()

  const changeState = () => {
    main.appInfo.header.changeHeader(false)
  }

  return (
    <context.Provider value={{ state, dispatch }}>
      <button onClick={changeState}>修改Header的状态（通过props传递控制）</button>
      <HashRouter>
        <Switch>
          {/* App页面 */}
          <Route path="/login" component={Login} />
          <Route path="/new-car" component={NewCar} />
          <Route path="/rank" component={Rank} />
        </Switch>
      </HashRouter>
    </context.Provider>
  )
}

export default BasicMap
